<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>选择图片</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" /> -->
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/backstage/css/font.css">
    <link rel="stylesheet" href="/backstage/css/xadmin.css">
    <!-- <link rel="stylesheet" href="http://unpkg.com/iview/dist/styles/iview.css"> -->
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        li {
            float: left;
            margin: 30px 15px;
        }

        #image_list div {
            width: 160px;
            height: 85px;
            margin-top: 5px;
            text-align: center;
        }

        #image_list img {
            /* width:150px; */
            height: 100%;
            max-width: 100%;
        }

        #image_list p {
            text-align: center;
        }

        .sure-btn {
            position: fixed;
            right: 6px;
            bottom: 6px;
            background: #6db836;
        }

        .checked-border {
            border: 2px solid red;
        }
    </style>
</head>

<body>


<div class="x-body" id='role'>
    <!--<div class="layui-row">-->
    <!--<form class="layui-form layui-col-md12 x-so">-->
    <!--<input class="layui-input" placeholder="开始日" name="start" id="start" >-->
    <!--<input class="layui-input" placeholder="截止日" name="end" id="end" >-->
    <!--<input type="text" name="seach_text"  placeholder="输入图片名称搜索" id='seach_text' class="layui-input" >-->
    <!--<button class="layui-btn"  lay-submit="" lay-filter="sreach" type="button" @click="seachData"><i class="layui-icon">&#xe615;</i></button>-->

    <!--</form>-->
    <!--</div>-->
    <div class="fixed-btn">
        <a href="image_folder?sel={$sel}">
            <button class="layui-btn"><i class="layui-icon layui-icon-return"></i>返回目录</button>
        </a>
        <button class="layui-btn layui-btn-danger" onclick="deleteImage()"><i class="layui-icon"></i>选中删除</button>
        <button class="layui-btn" onclick="showUploadImage('{$folder_id}')"><i
                class="layui-icon layui-icon-upload-drag">&#xe67c;</i>上传图片
        </button>
        <!-- <button class="layui-btn" onclick="showUploadImage('{$folder_id}',1)"><i class="layui-icon layui-icon-upload-drag">&#xe67c;</i>批量上传</button> -->
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
           href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon" style="line-height:30px">ဂ</i></a>
        <span class="x-right" style="line-height:40px">共有数据：{{pageData.count}} 条</span>
    </div>
    <hr>
    <div id='image_list'>
        <ul>
            <li v-for="(item,index) in imageList" @click="checkedImg(item.file_path,$event)">
                <div style='display:inline' class="layui-unselect layui-form-checkbox check-box" lay-skin="primary"
                     :data-id='item.id'><i class="layui-icon">&#xe605;</i></div>

                <div class="img-box">
                    <img :src="imgPath+item.file_path" alt="">
                    <p>{{item.file_name}}</p>
                    <p style="color:#ccc">{{item.create_time}}上传</p>
                </div>
            </li>
        </ul>
    </div>

    <div style="clear:both;display:block;text-align:center;padding-top:50px;">

        <div v-if="imageList.length" id="page"></div>
        <div v-else style="color:#ccc">暂无数据</div>
    </div>

    <button class="layui-btn sure-btn" @click="sureImg()">确定</button>

</div>

<!-- import iView -->

</body>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/vue.js"></script>
<!-- <script src="http://unpkg.com/iview/dist/iview.min.js"></script>     -->
<script type="text/javascript" src="/backstage/js/xadmin.js"></script>
<script type="text/javascript" src="/backstage/lib/layui/layui.js"></script>

<script>

    var app = new Vue({
        el: '#role',
        data: {
            imgPath: "{:config('api.oss_img_path')}",
            imageList: [],
            returnImg: '',
            returnImgList: [],
            pageData: {
                page: 1,
                count: 10,
                pageSize: 10,
                start: '',
                end: '',
                seach_text: ''
            }
        },
        methods: {
            //获取列表
            getListData: function () {

                var that = this;
                $.get('{:config("template.root_path")}/resource/image_list?folder_id={$folder_id}', that.pageData, function (res) {
                    if (res.code == 200) {
                        var list = res.imageList
                        for (index in list) {
                            if (list[index].file_name.length > 18)
                                list[index].file_name = list[index].file_name.substring(0, 18) + '...';
                        }
                        that.imageList = res.imageList;
                        that.pageData.page = res.pageData.page;
                        that.pageData.count = res.pageData.count;
                        that.pageData.pageSize = res.pageData.pageSize;

                        if (that.pageData.page == 1) {
                            page(that.pageData);
                        }
                    } else {
                        layer.msg(res.msg, {icon: 5, time: 1000});
                    }
                }, 'json');
            },

            //分页
            page: function () {
                var that = this;
                setTimeout(function () {
                    page(that.pageData);
                }, 100)
            },


            //删除
            image_delete: function (index, id) {
                var that = this;
                layer.confirm('删除后不可恢复', {title: '谨慎操作！'}, function (index) {
                    $.post('{:config(\'template.root_path\')}/resource/image_delete', {id: id}, function (msg) {
                        if (msg.code == 200) {
                            layer.msg('已删除!', {icon: 1, time: 1000});
                            that.getListData();
                        } else {
                            layer.msg(res.msg, {icon: 5, time: 1000});
                        }
                    }, 'json')
                });
            },
            //选中图片
            checkedImg: function (img, e) {

                console.log(img);
                var box = $(e.currentTarget).children('.check-box');
                var bor = $(e.currentTarget).find('img');


                if ('{$sel}' == 1) {
                    this.returnImg = img;
                } else {
                    this.returnImgList.push(img);
                }


                if (box.hasClass('layui-form-checked')) {

                    if ('{$sel}' == 1) {
                        //单选
                        $('.layui-form-checked').removeClass('layui-form-checked');
                    }
                    box.removeClass('layui-form-checked')
                } else {
                    if ('{$sel}' == 1) {
                        //单选
                        $('.layui-form-checked').removeClass('layui-form-checked');
                    }
                    box.addClass('layui-form-checked')
                }


                if (bor.hasClass('checked-border')) {
                    if ('{$sel}' == 1) {
                        //单选
                        $('.checked-border').removeClass('checked-border');
                    }
                    bor.removeClass('checked-border')
                } else {
                    if ('{$sel}' == 1) {
                        //单选
                        $('.checked-border').removeClass('checked-border');
                    }
                    bor.addClass('checked-border')
                }
            },

            //确定选中图片
            sureImg: function () {


                //传递到上一个页面

                if ('{$sel}' == 1) {
                    parent.app.returnImg = this.returnImg;
                } else {
                    parent.app.returnImgList = this.returnImgList;

                }

                parent.app.getImg();

                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
                // console.log('img',this.returnImg);
                // console.log('imgList',this.returnImgList);
            }
        },
        created: function () {
            this.returnImgList = [];
            this.getListData();
            var that = this;
//            setTimeout(function () {
//                that.page();
//            }, 100)
        }
    });

    layDate();

</script>
</html>